<template>
  <div class="shareDiv">
    <index-login @complete="complete" v-if="isShowgologin"></index-login>
    <div class="integralBtn" @click="toMyIntegral">
      <div>
        <p class="integraldiv">{{comGetCurrentIntegral}}</p>
        <p>兑换美豆</p>
      </div>
    </div>
    <div class="indexBtn" @click="toIndex">
      <div>
        <img src="/static/images/share1/toindex1.png">
        <p>首页</p>
      </div>
    </div>
    <div class="shareDivBg">
      <img src="/static/images/share1/shareBuyBg.png">
    </div>
    <div class="shareTxt" >
      <div class="shareRoute">
        <div @click="toIndex" class="shareRouteIndex">
          <img src="/static/images/share1/toindex.png">
          <p>返回首页</p>
        </div>
        <div @click="clickRoute" class="shareRouteIcon">
          <img src="/static/images/share1/activeRoute.png">
          <p>活动规则</p>
        </div>
      </div>
      <div class="shareProduct">
        <div class="supportCenter">
          <div v-if="shareIndetailAllItem">
            <div class="supportCenterLogo"><img :src="shareIndetailAllItem.user.avatar"></div>
            <p>{{shareIndetailAllItem.user.nickName}}</p>
          </div>
        </div>
        <div class="shareProductIndetail" v-if="shareIndetailAllItem">
          <div class="shareProductImg"><img :src="shareIndetailAllItem.productImageUrl"></div>
          <div class="shareProductTxt">
            <h3 class="shareProductName" v-if="shareIndetailAllItem.product">{{shareIndetailAllItem.product.name}}</h3>
            <p class="shareProductPrice">￥{{shareIndetailAllItem.sell_price}}</p>
          </div>
        </div>
      </div>
      <div class="redPacketDiv">
        <div class="redPacketDivBg">
          <img src="/static/images/share1/helpindetail.png">
        </div>
        <div class="redPacketDivTxt">
          <div class="refresh" ><div @click="refreshPage()"><img src="/static/images/share1/refresh.png" >刷新</div></div>
          <div class="redPacketDivTxtTitle">
            <h3 class="sharePersonTitle">分享者</h3>
            <h3 class="helpPersonTitle">帮助者</h3>
          </div>
          <ul class="shareUl">
            <li class="shareLi" v-if="shareIndetailAllItem">
              <div class="noWard" v-if="noClickRed1&&shareIndetailAllItem.bargainStatus != '订单已付款'" @click="openRedPacket(1)">
                <div class="liBg" ><img src="/static/images/share1/redpacket.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed1&&shareIndetailAllItem.bargainStatus == '订单已付款'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed1&&shareIndetailAllItem.bargainStatus == '超时'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWardBg" v-if="haveClickRed1">
                <p v-if="shareIndetailAllItem.bargainStatus == '超时'">奖励已失效</p>
                <p v-if="shareIndetailAllItem.bargainStatus == '完成'">分享已完成，等待分享者付款</p>
                <p v-if="shareIndetailAllItem.bargainStatus != '超时'&&shareIndetailAllItem.bargainStatus != '完成'"><span>{{secends}}s</span>开奖倒计时</p>
              </div>
              <div class="getWard" v-if="completeClickRed1">
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div v-if="comhelpPeople1.type=='线下活动卷'">
                      <img src="/static/images/share1/ticket.png"  >
                    </div>
                    <div v-if="comhelpPeople1.type=='积分券'">
                      <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople1.cardIntegral}}
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople1.avatar"></dt>
                      <dd>{{comhelpPeople1.nickName}}</dd>
                    </dl>
                    <div>
                      <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople1.integral}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="getWard" v-if="haveClickRed1">
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div>
                      <div v-if="shareIndetailAllItem.bargainStatus == '超时'">
                        <div v-if="comhelpPeople1.type=='线下活动卷'">
                          <img src="/static/images/share1/ticket.png"  >
                        </div>
                        <div v-if="comhelpPeople1.type=='积分券'">
                          <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                          <span>+</span>{{comhelpPeople1.cardIntegral}}
                        </div>
                      </div>
                      <div class="getWardIng" v-else>奖<i>美豆</i></div>
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople1.avatar"></dt>
                      <dd>{{comhelpPeople1.nickName}}</dd>
                    </dl>
                    <div class="getWardIng" v-if="shareIndetailAllItem.bargainStatus == '超时'">奖<i>{{comhelpPeople1.integral}}美豆</i></div>
                    <div class="getWardIng" v-else>奖<i>美豆</i></div>
                  </div>
                </div>
              </div>
            </li>
            <li class="shareLi" v-if="shareIndetailAllItem">
              <div class="noWard" v-if="noClickRed2&&shareIndetailAllItem.bargainStatus != '订单已付款'" @click="openRedPacket(2)">
                <div class="liBg" ><img src="/static/images/share1/redpacket.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed2&&shareIndetailAllItem.bargainStatus == '订单已付款'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed2&&shareIndetailAllItem.bargainStatus == '超时'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWardBg" v-if="haveClickRed2">
                <p v-if="shareIndetailAllItem.bargainStatus == '超时'">奖励已失效</p>
                <p v-if="shareIndetailAllItem.bargainStatus == '完成'">分享已完成，等待分享者付款</p>
                <p v-if="shareIndetailAllItem.bargainStatus != '超时'&&shareIndetailAllItem.bargainStatus != '完成'"><span>{{secends}}s</span>开奖倒计时</p>
              </div>
              <div class="getWard" v-if="completeClickRed2">
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div v-if="comhelpPeople2.type=='线下活动卷'">
                      <img src="/static/images/share1/ticket.png"  >
                    </div>
                    <div v-if="comhelpPeople2.type=='积分券'">
                      <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople2.cardIntegral}}
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople2.avatar"></dt>
                      <dd>{{comhelpPeople2.nickName}}</dd>
                    </dl>
                    <div>
                      <img src="/static/images/share1/rmoney.png" style="width:56rpx;height:58rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople2.integral}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="getWard" v-if="haveClickRed2"> 
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div>
                      <div v-if="shareIndetailAllItem.bargainStatus == '超时'">
                        <div v-if="comhelpPeople2.type=='线下活动卷'">
                          <img src="/static/images/share1/ticket.png"  >
                        </div>
                        <div v-if="comhelpPeople2.type=='积分券'">
                          <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                          <span>+</span>{{comhelpPeople2.cardIntegral}}
                        </div>
                      </div>
                      <div class="getWardIng" v-else>奖<i>美豆</i></div>
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople2.avatar"></dt>
                      <dd>{{comhelpPeople2.nickName}}</dd>
                    </dl>
                    <div class="getWardIng" v-if="shareIndetailAllItem.bargainStatus == '超时'">奖<i>{{comhelpPeople2.integral}}美豆</i></div>
                    <div class="getWardIng" v-else>奖<i>美豆</i></div>
                  </div>
                </div>
              </div>
            </li>
            <li class="shareLi" v-if="shareIndetailAllItem">
              <div class="noWard" v-if="noClickRed3&&shareIndetailAllItem.bargainStatus != '订单已付款'" @click="openRedPacket(3)">
                <div class="liBg" ><img src="/static/images/share1/redpacket.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed3&&shareIndetailAllItem.bargainStatus == '订单已付款'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWard" v-if="noClickRed3&&shareIndetailAllItem.bargainStatus == '超时'" @click="openRedPacketPast">
                <div class="liBg" ><img src="/static/images/share1/redpacket-past.png"></div>
              </div>
              <div class="noWardBg" v-if="haveClickRed3">
                <p v-if="shareIndetailAllItem.bargainStatus == '超时'">奖励已失效</p>
                <p v-if="shareIndetailAllItem.bargainStatus == '完成'">分享已完成，等待分享者付款</p>
                <p v-if="shareIndetailAllItem.bargainStatus != '超时'&&shareIndetailAllItem.bargainStatus != '完成'"><span>{{secends}}s</span>开奖倒计时</p>
              </div>
              <div class="getWard" v-if="completeClickRed3">
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div v-if="comhelpPeople3.type=='线下活动卷'">
                      <img src="/static/images/share1/ticket.png"  >
                    </div>
                    <div v-if="comhelpPeople3.type=='积分券'">
                      <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople3.cardIntegral}}
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople3.avatar"></dt>
                      <dd>{{comhelpPeople3.nickName}}</dd>
                    </dl>
                    <div>
                      <img src="/static/images/share1/rmoney.png" style="width:56rpx;height:58rpx;margin-right:5rpx">
                      <span>+</span>{{comhelpPeople3.integral}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="getWard" v-if="haveClickRed3">
                <div class="leftWard">
                  <div class="liBg"><img src="/static/images/share1/helps1.png"></div>
                  <div class="liTxt">
                    <div>
                      <div v-if="shareIndetailAllItem.bargainStatus == '超时'">
                        <div v-if="comhelpPeople3.type=='线下活动卷'">
                          <img src="/static/images/share1/ticket.png"  >
                        </div>
                        <div v-if="comhelpPeople3.type=='积分券'">
                          <img src="/static/images/share1/rmoney.png" style="width:68rpx;height:68rpx;margin-right:5rpx">
                          <span>+</span>{{comhelpPeople3.cardIntegral}}
                        </div>
                      </div>
                      <div class="getWardIng" v-else>奖<i>美豆</i></div>
                    </div>
                  </div>
                </div>
                <div class="rightWard">
                  <div class="liBg"><img src="/static/images/share1/helps2.png"></div>
                  <div class="liTxt">
                    <dl>
                      <dt><img :src="comhelpPeople3.avatar"></dt>
                      <dd>{{comhelpPeople3.nickName}}</dd>
                    </dl> 
                    <div class="getWardIng" v-if="shareIndetailAllItem.bargainStatus == '超时'">奖<i>{{comhelpPeople3.integral}}美豆</i></div>
                    <div class="getWardIng" v-else>奖<i>美豆</i></div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cutdownBtn" v-if="shareIndetailAllItem.bargainStatus == '正在进行'">
        <div class="cutdown">结束此次分享还剩&nbsp;&nbsp;&nbsp;{{secends}}s</div>
    </div>
    <div class="cutdownBtn" @click="toIndex" v-if="shareIndetailAllItem.bargainStatus == '完成'">
      <p>分享已完成，点击进入</p>
    </div>
    <div class="cutdownBtn" @click="toIndex" v-if="shareIndetailAllItem.bargainStatus == '超时'">
      <p>订单已失效</p>
    </div>
    <div class="cutdownBtn" @click="toIndex" v-if="shareIndetailAllItem.bargainStatus == '取消'">
      <p>订单已取消</p>
    </div>
    <div class="cutdownBtn" @click="toIndex" v-if="shareIndetailAllItem.bargainStatus == '订单已付款'">
      <p>订单已付款</p>
    </div>
    <share-route  @cancelRoute="cancelRouteAlert" v-if="isShowShareRoute"></share-route>
    <share-open-redpack 
    @cancelopenpage="cancelopenpage" 
    @cancelrefresh="cancelrefresh"
    @havaopend="havaopend" 
    :orderNum="orderNum" 
    :pagetype="pagetype"
    :num="num" 
    :shareuser='shareIndetailAllItem.user'
    v-if="isShowRedpack">
    </share-open-redpack>>
  </div>
</template>

<script>
  import indexLogin from '@/components/dialog/index-login' 
  import shareRoute from '@/components/share/share-route.vue'
  import shareOvertime from '@/components/share/share-overtime.vue'
  import shareOpenRedpack from '@/components/share/share-open-redpack.vue'
  import {mapGetters} from 'vuex'
  export default {
    components:{
      indexLogin,shareRoute,shareOvertime,shareOpenRedpack
    },
    data (){
      return{
        pagetype: 'share-after',//页面类型
        orderNum: '', //订单号
        isShowShareRoute: false,//是否显示规则弹框
        isShowOverTime: false, //是否显示超时弹框
        isShowRedpack: false,//是否显示红包弹框
        shareIndetailAll: false,//分享的商品的详情
        // day: '00',
        // hours: '00',
        // minute: '00',
        secends: 0,
        timer: null,
        currentDif: 0,//倒计时的时间
        isgologin: false,//是否登录了
        helpPeople: '',//帮忙的人
        helpPeople1: '',//帮忙的人
        helpPeople2: '',//帮忙的人
        helpPeople3: '',//帮忙的人
        noClickRed1: true,//没点红包
        haveClickRed1: false,//点击了红包但是还没付款
        completeClickRed1: false,//点击了红包并且付款已经完成
        noClickRed2: true,//没点红包
        haveClickRed2: false,//点击了红包但是还没付款
        completeClickRed2: false,//点击了红包并且付款已经完成
        noClickRed3: true,//没点红包
        haveClickRed3: false,//点击了红包但是还没付款
        completeClickRed3: false,//点击了红包并且付款已经完成
        isPayFor: Boolean,//该商品是否已经付款
        getCurrentIntegral: 0,//得到当前的积分
        arrhelp: '',//分享用户的姓名和头像
        num: '',//点击的是第几个红包
      }
    },
    onLoad(option){
      this.orderNum = option.bargainOrderNo
      wx.hideShareMenu()
      //相当于初始化
      this.noClickRed1 = true//没点红包
      this.haveClickRed1 = false//点击了红包但是还没付款
      this.completeClickRed1 = false//点击了红包并且付款已经完成
      this.noClickRed2 = true//没点红包
      this.haveClickRed2 = false//点击了红包但是还没付款
      this.completeClickRed2 = false//点击了红包并且付款已经完成
      this.noClickRed3 = true//没点红包
      this.haveClickRed3 = false//点击了红包但是还没付款
      this.completeClickRed3 = false//点击了红包并且付款已经完成
      this.helpPeople1 = ""
      this.helpPeople2 = ""
      this.helpPeople3 = ""
      this.helpPeople = ""
    },
    computed:{
      ...mapGetters([
        'userInfo'
      ]),
      shareIndetailAllItem(){ //分享的商品的详情
        return this.shareIndetailAll
      },
      isShowgologin(){
        return this.isgologin
      },
      comhelpPeople1(){
        return this.helpPeople1
      },
      comhelpPeople2(){
        return this.helpPeople2
      },
      comhelpPeople3(){
        return this.helpPeople3
      },
      comGetCurrentIntegral(){
        return this.getCurrentIntegral
      }
    },
    onShow(){
      this.isShowShareRoute = false
      this.isShowRedpack = false
      this._getShareBuyIndetail(this.orderNum)
      this.doCurrentIntegral()
    }, 
    onUnload(){
      clearInterval(this.timer)
    },
    onHide(){
      clearInterval(this.timer)
    },
    methods: {
      refreshPage(){//刷新页面
        this._getShareBuyIndetail(this.orderNum)
        this.doCurrentIntegral()
      },
      complete(){
        console.log("如果我走成功了，就应该调用接口")
        this._getShareBuyIndetail(this.orderNum)
        this.doCurrentIntegral()
      },
      _getShareBuyIndetail(bargainOrderNo){//获取页面数据
        console.log("这是我的share接口")
        this.$http.get(`bargains/${bargainOrderNo}/share`).then((data)=>{ 
          console.log(data.data)
          if(data.data.code === 1){//自己进入
            this.isgologin = false
            const url = `/pages/share/main?bargainOrderNo=${bargainOrderNo}`;
            wx.redirectTo({ url })
          }else if(data.data.code === 0){ //这是别人进来
            wx.setStorageSync("isSharePage",true)
            this.isgologin = true
            this.shareIndetailAll = data.data.data //接口所有的返回值
            this.helpPeople = data.data.data.joiners //帮助的人
            let differTime = this.shareIndetailAll.expiredAt-this.shareIndetailAll.createdAt //倒计时的时间
            this.isPayFor = data.data.data.bargainStatus //判断是否支付了该订单
            if(this.isPayFor == "订单已付款"){
              this.yesPayFor()
            }else{
              this.noPayFor()
            }
            if(this.shareIndetailAll.bargainStatus == "超时"){
              this.timeout()
              clearInterval(this.timer)
            }
            if(this.shareIndetailAll.bargainStatus == "正在进行"||this.shareIndetailAll.bargainStatus == "完成"){
              this.cutdown(differTime)
            }else{
              return false
            }
          }else if(data.data.code === 2){
            this.isgologin = true
          }
          wx.hideLoading()
        })
      },
      cutdown(differTime){ //倒计时
        this.currentDif = Math.ceil(differTime/1000)
          clearInterval(this.timer)
          this.timer = setInterval(()=>{
            if(this.currentDif>0){
              this.currentDif--
              if(this.currentDif == 150){
                this.refreshPage()
              }else if(this.currentDif == 120){
                this.refreshPage()
              }else if(this.currentDif == 90){
                this.refreshPage()
              }else if(this.currentDif == 60){
                this.refreshPage()
              }else if(this.currentDif == 30){
                this.refreshPage()
              }else if(this.currentDif == 0){
                this.isShowRedpack = false
                this.currentDif = 0
                this.refreshPage()
                clearInterval(this.timer)
              }
            }else{
              this.currentDif = 0
            }
            this.secends = this.currentDif
          }, 1000);  
      },
      toAccount(){ //去结算
        wx.showModal({
          title: '',
          content: '确定结束帮助吗？',
          success: (sm) => {
            if (sm.confirm) {
              // 用户点击了确定 可以调用删除方法了
              this.$http.get(`bargains/${this.orderNum}/finish`,'','',false).then((data)=>{ 
                let orderNo = data.data.data.orderNo; //去支付接口的订单号
                wx.setStorageSync('orderNo', orderNo) //设置支付接口的订单号

                const url = '../order-share/main';
                wx.navigateTo({ url })
              })
            } else if (sm.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      cancelOrder(){
        wx.showModal({
          title: '',
          content: '订单已取消，确定去首页么？',
          success: (sm) => {
            if (sm.confirm) {
              const url = '../index/main';
              wx.switchTab({ url })
            } else if (sm.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      openRedPacketPast(){
        this.wxAlert("红包已失效")
      },
      openRedPacket(num){ //判断是否弹出红包开的弹框
        this.$http.get(`bargains/${this.orderNum}/virtualHelpDraw/${num}`).then((data)=>{ 
          if(data.data.code === 3){
            this.wxAlert("您已经抓过了哟")
          }else if(data.data.code === 2){
            this.wxAlert("客官，请下次早点额")
          }else if(data.data.code === 4){
            this.wxAlert("该红包已被别人拆开了~")
          }else if(data.data.code === 5){
            this.wxAlert("红包已失效")
          }else if(data.data.code === 6){
            this.wxAlert("分享已经结束了")
          }else{
            this.isShowRedpack = true
            this.num = num
          }
        }) 
      },
      clickRoute(){
        this.isShowShareRoute = true
      },
      cancelRouteAlert(val){
        this.isShowShareRoute = false
      },
      cancelopenpage(val){
        this.isShowRedpack = false
      },
      cancelrefresh(val){
        this.isShowRedpack = false
        this.refreshPage()
      },
      havaopend(){
        this.isShowRedpack = false
        if(this.num == 1){
          this.noClickRed1 = false//没点红包
          this.haveClickRed1 = true//点击了红包但是还没付款
          this.completeClickRed1 = false//点击了红包并且付款已经完成
          this.helpPeople1 = this.arrhelp
        }else if(this.num == 2){
          this.noClickRed2 = false//没点红包
          this.haveClickRed2 = true//点击了红包但是还没付款
          this.completeClickRed2 = false//点击了红包并且付款已经完成
          this.helpPeople2 = this.arrhelp
        }else if(this.num == 3){
          this.noClickRed3 = false//没点红包
          this.haveClickRed3 = true//点击了红包但是还没付款
          this.completeClickRed3 = false//点击了红包并且付款已经完成
          this.helpPeople3 = this.arrhelp
        }
      },
      toMyIntegral(){
        const url = '/pages/user-withdrawal/main';
        wx.navigateTo({url})
      },
      doCurrentIntegral(){
        this.$http.get(`integral/my/integral`,'','',false).then((data)=>{ 
          this.getCurrentIntegral = data.data.data.integral
        })
      },
      toIndex () {
        const url = '../index/main';
        wx.switchTab({ url })
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      },
      timeout(){//超时
        if(this.helpPeople.length == 0){
            this.noClickRed1 = true//没点红包
            this.haveClickRed1 = false//点击了红包但是还没付款
            this.completeClickRed1 = false//点击了红包并且付款已经完成
            this.noClickRed2 = true
            this.haveClickRed2 = false
            this.completeClickRed2 = false
            this.noClickRed3 = true
            this.haveClickRed3 = false
            this.completeClickRed3 = false
          }else if(this.helpPeople.length == 1){
            let whichOne = this.helpPeople[0].position
            this.arrhelp = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            if(whichOne == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
            
              this.helpPeople1 = this.arrhelp
            }else if(whichOne == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false

              this.helpPeople2 = this.arrhelp
            }else if(whichOne == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false

              this.helpPeople3 = this.arrhelp
            }
          }else if(this.helpPeople.length == 2){
            let whichOne1= this.helpPeople[0].position
            let whichOne2= this.helpPeople[1].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
              integral: this.helpPeople[1].integral,
              type: this.helpPeople[1].type,
              cardIntegral: this.helpPeople[1].cardIntegral,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp2
            }
          }else if(this.helpPeople.length == 3){
            let whichOne1 = this.helpPeople[0].position
            let whichOne2 = this.helpPeople[1].position
            let whichOne3 = this.helpPeople[2].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
              integral: this.helpPeople[1].integral,
              type: this.helpPeople[1].type,
              cardIntegral: this.helpPeople[1].cardIntegral,
            }
            let arrhelp3 = {
              avatar: this.helpPeople[2].avatar,
              nickName: this.helpPeople[2].nickName,
              integral: this.helpPeople[2].integral,
              type: this.helpPeople[2].type,
              cardIntegral: this.helpPeople[2].cardIntegral,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp2
            }
            if(whichOne3 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp3
            }else if(whichOne3 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp3
            }else if(whichOne3 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp3
            }
          }
      },
      noPayFor(){//未支付
        if(this.helpPeople.length == 0){
            this.noClickRed1 = true
            this.haveClickRed1 = false
            this.completeClickRed1 = false
            this.noClickRed2 = true
            this.haveClickRed2 = false
            this.completeClickRed2 = false
            this.noClickRed3 = true
            this.haveClickRed3 = false
            this.completeClickRed3 = false
          }else if(this.helpPeople.length == 1){
            let whichOne = this.helpPeople[0].position
            this.arrhelp = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
            }
            if(whichOne == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
            
              this.helpPeople1 = this.arrhelp
            }else if(whichOne == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false

              this.helpPeople2 = this.arrhelp
            }else if(whichOne == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false

              this.helpPeople3 = this.arrhelp
            }
          }else if(this.helpPeople.length == 2){
            let whichOne1= this.helpPeople[0].position
            let whichOne2= this.helpPeople[1].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp2
            }
          }else if(this.helpPeople.length == 3){
            let whichOne1 = this.helpPeople[0].position
            let whichOne2 = this.helpPeople[1].position
            let whichOne3 = this.helpPeople[2].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
            }
            let arrhelp3 = {
              avatar: this.helpPeople[2].avatar,
              nickName: this.helpPeople[2].nickName,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp2
            }
            if(whichOne3 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = true
              this.completeClickRed1 = false
              this.helpPeople1 = arrhelp3
            }else if(whichOne3 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = true
              this.completeClickRed2 = false
              this.helpPeople2 = arrhelp3
            }else if(whichOne3 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = true
              this.completeClickRed3 = false
              this.helpPeople3 = arrhelp3
            }
          }
      },
      yesPayFor(){//已经支付
        if(this.helpPeople.length == 0){
            this.noClickRed1 = true
            this.haveClickRed1 = false
            this.completeClickRed1 = false
            this.noClickRed2 = true
            this.haveClickRed2 = false
            this.completeClickRed2 = false
            this.noClickRed3 = true
            this.haveClickRed3 = false
            this.completeClickRed3 = false
          }else if(this.helpPeople.length == 1){
            let whichOne = this.helpPeople[0].position
            this.arrhelp = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            if(whichOne == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
            
              this.helpPeople1 = this.arrhelp
            }else if(whichOne == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true

              this.helpPeople2 = this.arrhelp
            }else if(whichOne == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true

              this.helpPeople3 = this.arrhelp
            }
          }else if(this.helpPeople.length == 2){
            let whichOne1= this.helpPeople[0].position
            let whichOne2= this.helpPeople[1].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
              integral: this.helpPeople[1].integral,
              type: this.helpPeople[1].type,
              cardIntegral: this.helpPeople[1].cardIntegral,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true
              this.helpPeople3 = arrhelp2
            }
          }else if(this.helpPeople.length == 3){
            let whichOne1 = this.helpPeople[0].position
            let whichOne2 = this.helpPeople[1].position
            let whichOne3 = this.helpPeople[2].position
            let arrhelp1 = {
              avatar: this.helpPeople[0].avatar,
              nickName: this.helpPeople[0].nickName,
              integral: this.helpPeople[0].integral,
              type: this.helpPeople[0].type,
              cardIntegral: this.helpPeople[0].cardIntegral,
            }
            let arrhelp2 = {
              avatar: this.helpPeople[1].avatar,
              nickName: this.helpPeople[1].nickName,
              integral: this.helpPeople[1].integral,
              type: this.helpPeople[1].type,
              cardIntegral: this.helpPeople[1].cardIntegral,
            }
            let arrhelp3 = {
              avatar: this.helpPeople[2].avatar,
              nickName: this.helpPeople[2].nickName,
              integral: this.helpPeople[2].integral,
              type: this.helpPeople[2].type,
              cardIntegral: this.helpPeople[2].cardIntegral,
            }
            if(whichOne1 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
              this.helpPeople1 = arrhelp1
            }else if(whichOne1 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true
              this.helpPeople2 = arrhelp1
            }else if(whichOne1 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true
              this.helpPeople3 = arrhelp1
            }
            if(whichOne2 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
              this.helpPeople1 = arrhelp2
            }else if(whichOne2 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true
              this.helpPeople2 = arrhelp2
            }else if(whichOne2 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true
              this.helpPeople3 = arrhelp2
            }
            if(whichOne3 == 1){
              this.noClickRed1 = false
              this.haveClickRed1 = false
              this.completeClickRed1 = true
              this.helpPeople1 = arrhelp3
            }else if(whichOne3 == 2){
              this.noClickRed2 = false
              this.haveClickRed2 = false
              this.completeClickRed2 = true
              this.helpPeople2 = arrhelp3
            }else if(whichOne3 == 3){
              this.noClickRed3 = false
              this.haveClickRed3 = false
              this.completeClickRed3 = true
              this.helpPeople3 = arrhelp3
            }
          }
      },
    }
  }
</script>
<style scoped>
button::after{
  border: none;
}
.shareDiv {
  position: relative;
  padding-bottom: 100rpx;
}
.shareDiv .shareDivBg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
.shareDiv .shareDivBg img{
  width: 100%;
  height: 100%;
}
.shareDiv .shareTxt{
   position: relative;
   z-index: 9; 
   overflow: hidden;
}
.shareDiv .shareTxt .shareRoute{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  color: #151515;
  padding: 0 30rpx;
  margin-top: 29rpx;
}
.shareDiv .shareTxt .shareRoute div{
  display: flex; 
  align-items: center;
}
.shareDiv .shareTxt .shareRoute div.shareRouteIndex img{
   width: 30rpx;
   height: 30rpx;
   display: block;
   margin-right: 15rpx;
}
.shareDiv .shareTxt .shareRoute div.shareRouteIcon img{
   width: 30rpx;
   height: 30rpx;
   display: block;
   margin-right: 20rpx;
}
.shareDiv .shareTxt .shareProduct{
  width: 580rpx;
  height: auto;
  background: #fff;
  border:2rpx solid #49585F;
  border-radius: 20rpx;
  margin: 65rpx auto -20rpx;
  padding-bottom: 30rpx;
}
.shareDiv .shareTxt .shareProduct .supportCenter{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: #2A2A2A;
  height: 110rpx;
  text-align: center;
}
.shareDiv .shareTxt .shareProduct .supportCenter .supportCenterLogo{
  width: 108rpx;
  height: 108rpx;
  border: 2rpx solid #fff;
  border-radius: 100%;
  margin: -54rpx auto 0;
  box-sizing: border-box;
}
.shareDiv .shareTxt .shareProduct .supportCenter .supportCenterLogo img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail{
  width: 100%;
  display: flex;
  overflow: hidden;
  margin-top: 5rpx;
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail .shareProductImg{
  width: 140rpx;
  height: 140rpx;
  margin: auto 30rpx auto 40rpx;
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail .shareProductImg img{
  width: 100%;
  height: 100%;
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail .shareProductTxt{
  flex: 1;
  margin-right: 10rpx;
  position: relative;
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail .shareProductTxt .shareProductName{
  font-size: 26rpx;
  color: #2A2A2A;  
  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
}
.shareDiv .shareTxt .shareProduct .shareProductIndetail .shareProductTxt .shareProductPrice{
  font-size: 36rpx;
  color: #E78A8A;  
  position: absolute;
  bottom: 0;
  width: 100%;
}
.shareDiv .shareTxt .shareBtnDiv .shareBtn{
  text-align: center;
  font-size: 30rpx;
  color: #fff;  
  width: 450rpx;
  height: 68rpx;
  line-height: 68rpx;
  background: #AAD1D6;
  border-radius: 8rpx;
  margin: 30rpx auto 0;
  box-shadow:0px 3px 7px 0px rgba(74, 102, 99, 0.35);
}
.shareDiv .shareTxt .shareBtnDiv .shareBtn button{
  width: 100%;
  height: 100%;
  line-height: 68rpx;
  background: #AAD1D6;
  font-size: 32rpx;
  color: #fff;
}
.shareDiv .shareTxt .redPacketDiv{
  position: relative;
  overflow: hidden;
  margin: 0 43rpx 0 50rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivBg{
  width: 657rpx;
  height: 900rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivBg img{
  width: 100%;
  height: 100%;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt{
  position: absolute;
  top: 190rpx;
  width: 100%;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .refresh{
  width: 100%;
  height: 60rpx;
  font-size: 30rpx;
  color: #000;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: -75rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .refresh div{
  width: 120rpx;
  height: 60rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 30rpx
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .refresh div img{
  width: 30rpx;
  height: 30rpx;
  display: block;
  margin-right: 10rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .redPacketDivTxtTitle{
  display: flex;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  margin: 0 15rpx 0 12rpx;
  border-top: 1px solid #c4c9cb;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .redPacketDivTxtTitle .sharePersonTitle{
  color: #FB8175;
  flex: 1;
  box-sizing: border-box;
  border-right: 1px solid #c4c9cb;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .redPacketDivTxtTitle .helpPersonTitle{
  color: #59BFCA;
  flex: 1;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl{
  padding: 0 15rpx 0 12rpx;
  position: relative;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi{
  height: 190rpx;
  margin-bottom: 15rpx;
  position: relative;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .noWard{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .noWard .liBg{
  padding: 0 15rpx;
  height: 100%;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .noWard .liBg img{
  width: 100%;
  height: 100%;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 190rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard{
  box-sizing: border-box;
  border-right: 1px solid #c4c9cb;
  flex: 1;
  height: 190rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liBg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liBg img{
  width: 100%;
  height: 100%;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liTxt{
  position: relative;
  z-index: 2;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liTxt div{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #FB8175;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liTxt div span{
  font-size: 50rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .leftWard .liTxt div img{
  width: 239rpx;
  height: 129rpx;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard{
  box-sizing: border-box;
  flex: 1;
  height: 190rpx;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liBg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liBg img{
  width: 100%;
  height: 100%;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt{
  position: relative;
  z-index: 2;
  display: flex;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt div{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #FB8175;
  flex: 1;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt div span{
  font-size: 50rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt div img{
  width: 100%;
  height: 100%;
  display: block;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt dl{
  width: 125rpx;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt dt{
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt dt img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWard .rightWard .liTxt dd{
  font-size: 22rpx;
  color: #798283;
  margin: 0 5rpx;
  text-align: center;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWardIng{
  font-size: 30rpx!important;
  color: #2a2a2a!important;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .getWardIng i{
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #fb8175;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .noWardBg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 3;
  background: #000000;
  opacity: 0.6;
  font-size: 30rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.shareDiv .shareTxt .redPacketDiv .redPacketDivTxt .shareUl .shareLi .noWardBg span{
  display: block;
  font-size: 40rpx;
}
.cutdownBtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  height: 98rpx;
  background: #fff;
}
.cutdownBtn p{
  line-height: 98rpx;
  text-align: center;
  font-size: 30rpx;
  color: #de8b88;  
  width: 100%;
}
.cutdownBtn .cutdown {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #de8b88;  
}
.cutdownBtn .computedBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 205rpx;
  background: #aad1d6;
  font-size: 30rpx;
  color: #fefefe;    
}
.shareDiv .shareTxt  .helpIndetail{
  margin: 43rpx auto;
  width: 660rpx;
  height: auto;
  padding: 0 5rpx;
  border-radius: 5rpx;
  background: #f5b5b5;
  font-size: 24rpx;
  color: #fff;  
  overflow: hidden; 
}
.shareDiv .shareTxt  .helpIndetail .refreshDiv{
  font-size: 28rpx;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 24rpx;
  margin-top: 10rpx;
}
.shareDiv .shareTxt  .helpIndetail .refreshDiv div{
  width: 30rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.shareDiv .shareTxt  .helpIndetail .refreshDiv img{
  width: 100%;
  height: 100%;
}
.shareDiv .shareTxt  .helpIndetail .helpIndetailTitle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.shareDiv .shareTxt  .helpIndetail .helpIndetailTitle img{
  width: 173rpx;
  height: 24rpx;
}
.shareDiv .shareTxt  .helpIndetail .helpIndetailTitle h3{
  margin: 0 25rpx;
}
.shareDiv .shareTxt  .helpIndetail .helpItem{
  padding: 5rpx 0 15rpx;
  overflow-y: auto;
  height: 260rpx;
}
.integralBtn{
  height: 110rpx;
  width: 110rpx;
  background: #000;
  opacity: 0.8;
  border-radius: 100%;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 120rpx;
  right: 20rpx;
  z-index: 101;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.integralBtn>div{
  overflow: hidden;
}
.integralBtn .integraldiv {
  font-size: 26rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.indexBtn{
  height: 110rpx;
  width: 110rpx;
  background: #000;
  opacity: 0.8;
  border-radius: 100%;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 250rpx;
  right: 20rpx;
  z-index: 101;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.indexBtn>div{
  overflow: hidden;
}
.indexBtn img{
  width: 52rpx;
  height: 48rpx;
  display: block;
  margin: 0 auto 10rpx;
}
</style>
